<template>
    <div class="login-container">
        <div class="login-form-wrapper">
            <div class="login-title">
                <el-icon class="title-icon">
                    <TrendCharts />
                </el-icon>
                <h2>量化交易系统</h2>
            </div>
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="0px" class="login-form"
                @keyup.enter="handleLogin">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="用户名" clearable :validate-event="false">
                        <template #prefix>
                            <el-icon class="input-icon">
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="密码" show-password
                        :validate-event="false">
                        <template #prefix>
                            <el-icon class="input-icon">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-checkbox v-model="loginForm.remember" :validate-event="false">记住我</el-checkbox>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleLogin" :loading="isLoading" class="login-button"
                        :validate-event="false">
                        <template #icon>
                            <ArrowRight />
                        </template>登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { TrendCharts, User, Lock, ArrowRight } from '@element-plus/icons-vue'

const router = useRouter()
const loginFormRef = ref()
const isLoading = ref(false)

// 登录表单数据
const loginForm = reactive({
    username: '',
    password: '',
    remember: false
})

// 表单验证规则
const loginRules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }
    ]
}

// 处理登录
const handleLogin = async () => {
    try {
        await loginFormRef.value.validate()

        isLoading.value = true

        // 模拟API请求延迟
        setTimeout(() => {
            if (loginForm.username && loginForm.password) {
                // 保存登录状态
                localStorage.setItem('isLoggedIn', 'true')
                if (loginForm.remember) {
                    localStorage.setItem('username', loginForm.username)
                } else {
                    localStorage.removeItem('username')
                }

                // 直接进行路由跳转，不显示可能会带到下一页的消息
                router.push('/')
            } else {
                ElMessage.error('用户名或密码错误')
            }

            isLoading.value = false
        }, 800)
    } catch (error) {
        isLoading.value = false
    }
}

// 初始化时加载保存的用户名
onMounted(() => {
    const savedUsername = localStorage.getItem('username')
    if (savedUsername) {
        loginForm.username = savedUsername
        loginForm.remember = true
    }
})
</script>

<style scoped>
.login-container {
    min-height: 100vh;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-form-wrapper {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 32px;
    width: 100%;
    max-width: 380px;
    border: 1px solid #e9ecef;
}

.login-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #2c3e50;
    margin-bottom: 32px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.login-title h2 {
    margin: 0;
}

.title-icon {
    color: #409eff;
    font-size: 24px;
}

.input-icon {
    color: #909399;
    font-size: 16px;
}

.login-form {
    width: 100%;
}

.login-form :deep(.el-form-item) {
    margin-bottom: 20px;
}

.login-form :deep(.el-input__wrapper) {
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    box-shadow: none;
    transition: all 0.2s ease;
}

.login-form :deep(.el-input__wrapper:hover) {
    border-color: #d0d0d0;
    box-shadow: none;
}

.login-form :deep(.el-input__wrapper.is-focus) {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.login-form :deep(.el-checkbox__label) {
    font-size: 14px;
    color: #606266;
}

.login-button {
    width: 100%;
    height: 40px;
    font-size: 15px;
    border-radius: 6px;
    background-color: #409eff;
    border: none;
    transition: all 0.2s ease;
}

.login-button:hover:not(:disabled) {
    background-color: #66b1ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.login-button:active:not(:disabled) {
    transform: translateY(0);
}
</style>